<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试模块</title>
</head>
<body>
    <div id="app">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">账号管理</el-menu-item>
            <el-menu-item index="2">消息中心</el-menu-item>
            <el-menu-item index="3">订单管理</el-menu-item>
            <el-submenu index="4">
                <template slot="title">药品管理</template>
                <el-menu-item index="2-1" @click="handleAdd">添加药品</el-menu-item>
            </el-submenu>
        </el-menu>

        <!-- 表格 -->
        <template>
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="编号"
                        width="50"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="药品名称"
                        width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="药品类别"
                        width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="生产地"
                        width="200"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="number"
                        label="库存数量"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="价格"
                        align="center">
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" plain @click="handleUpdate(scope.row)">编辑</el-button>
                        <el-button type="danger" plain @click="deleteById(scope.row)">删除</el-button>
                    </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </template>


        <!--新增  表单-->
        <el-dialog
                title="药品信息"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <div style="margin: 20px;"></div>
            <el-form :label-position="right" label-width="80px" :model="dataList">
                <el-form-item label="药品名称">
                    <el-input v-model="dataList.name"></el-input>
                </el-form-item>
                <el-form-item label="药品类别">
                    <el-input v-model="dataList.type"></el-input>
                </el-form-item>
                <el-form-item label="生产地">
                    <el-input v-model="dataList.address"></el-input>
                </el-form-item>
                <el-form-item label="库存数量">
                    <el-input v-model="dataList.number"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="dataList.price"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addMedicine">保存</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--编辑-->
        <el-dialog
                title="编辑"
                :visible.sync="dialogVisibleEdit"
                width="30%"
        >
            <div style="margin: 20px;"></div>
            <el-form :label-position="right" label-width="80px" :model="dataList">
                <el-form-item label="药品编号">
                    <el-input v-model="dataList.id"></el-input>
                </el-form-item>
                <el-form-item label="药品名称">
                    <el-input v-model="dataList.name"></el-input>
                </el-form-item>
                <el-form-item label="药品类别">
                    <el-input v-model="dataList.type"></el-input>
                </el-form-item>
                <el-form-item label="生产地">
                    <el-input v-model="dataList.address"></el-input>
                </el-form-item>
                <el-form-item label="库存数量">
                    <el-input v-model="dataList.number"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="dataList.price"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="okUpdate">保存</el-button>
                    <el-button @click="dialogVisibleEdit = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>

    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

    <script>

        new Vue({
            el: "#app",
            data(){
                return{
                    tableData: [],
                    dataList: {},
                    dialogVisible: false,
                    dialogVisibleEdit: false
                }
            },
            mounted(){
                this.getAll();
            },
            methods: {
                getAll(){
                    axios.get("/medicines").then((resp)=>{
                        this.tableData = resp.data.data
                    })
                },
                // 弹出表单
                handleAdd(){
                    this.dialogVisible = true;
                    this.resetFrom();
                },
                // 重置表单
                resetFrom(){
                    this.dataList={};
                },
                // 提交
                addMedicine(){
                    axios.post("/medicines",this.dataList).then((resp)=>{
                        if (resp.data.code == 20011){
                            this.dialogVisible=false;
                            this.$message.success("添加成功！");
                        }else if (resp.data.code == 20010){
                            this.$message.error("添加失败！");
                        }else {
                            this.$message.error(resp.data.msg);
                        }
                    }).finally(()=>{
                        this.resetFrom();
                        this.getAll();
                    })
                },
                // 编辑
                handleUpdate(row){
                    axios.get("/medicines/"+row.id).then((resp)=>{
                        if (resp.data.code == 20041){
                            // 展示弹层，加载数据
                            this.dataList = resp.data.data;
                            this.dialogVisibleEdit = true;
                        }else {
                            this.$message.error(resp.data.msg);
                        }
                    });
                },
                okUpdate(){
                    axios.put("/medicines",this.dataList).then((resp)=>{
                        if (resp.data.code == 20031){
                            this.dialogVisibleEdit=false;
                            this.$message.success("修改成功！");
                        }else if (resp.data.code == 20030){
                            console.log(resp.data);
                            this.$message.error("修改失败！");
                        }else {
                            this.$message.error(resp.data.msg);
                        }
                    }).finally(()=>{
                        this.getAll();
                    })
                },
                deleteById(row){
                    this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
                        type:"info"
                    }).then(()=>{
                        axios.delete("/medicines/"+row.id).then((resp)=>{
                            if (resp.data.code == 20021){
                                this.$message.success("删除成功！");
                                this.getAll();
                            }else {
                                this.$message.error("删除失败！");
                            }
                        });
                    }).catch(()=>{
                        this.$message.info("取消成功！");
                    })
                }

            }
        })

    </script>
</body>
</html>